var stats = new Stats(),
    c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    CANVAS_WIDTH_AS_METER = 10,
    pixelPerMeter = 0,
    fpx;
window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize () {
    c.width = window.innerWidth * window.devicePixelRatio;
    c.height = window.innerHeight * window.devicePixelRatio;
    pixelPerMeter = c.width / CANVAS_WIDTH_AS_METER
}
handleWindowResize();

function drawBall (sprite, ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(sprite.x, sprite.y, sprite.r, 0, Math.PI * 2, false);
    ctx.clip();

    ctx.shadowColor = 'black';
    ctx.shadowOffsetX = -4;
    ctx.shadowOffsetY = -4;
    ctx.shadowBlur = 8;
    ctx.lineWidth = 2;

    ctx.strokeStyle = 'rgb(100, 100, 255)';
    ctx.stroke();
    ctx.beginPath();

    ctx.arc(sprite.x, sprite.y, sprite.r / 2, 0, Math.PI * 2, false);

    ctx.clip();

    ctx.shadowColor = 'rgb(255, 255, 0)';
    ctx.shadowOffsetX = -4;
    ctx.shadowOffsetY = -4;
    ctx.shadowBlur = 8;

    ctx.stroke();
    ctx.restore();
}

var drawBallPainter = new Sprite.StrokeAndFillPainter(drawBall);

var ball = new Sprite('ball', drawBallPainter);

var moveToRightTimer = new Sprite.AnimationTimer(1000);

function moveToRight (sprite, behavior, ctx) {
    if(moveToRightTimer.isRunning()) {
        var animationElapsed = moveToRightTimer.getElapsedTime(),
            elapsed;
        if(this.lastTime !== undefined) {
            elapsed = animationElapsed - behavior.lastTime;
            behavior.updateBallPosition(elapsed);
            if(moveToRightTimer.isOver()) {
                moveToRightTimer.stop();
                behavior.resetBall();
            }
        }
    }
    behavior.lastTime = animationElapsed;
}

ball.addBehavior(moveToRight, {
    lastTime: undefined,
    resetBall: function () {
        ball.set({
            x: c.width / 2 - 500,
            y: c.height / 2
        })
    },
    updateBallPosition: function (elapsed) {
        //匀速右，没有加速度的线性运动
        ball.speed.set({
            x: 5 * pixelPerMeter * (elapsed / 1000),
            y: 0
        });
        ball.add(ball.speed);
    }
});

ball.set({
    x: c.width / 2 - 500,
    y: c.height / 2
})
ball.r = 20;

//事件处理
document.getElementById('linear').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Linear;
    moveToRightTimer.start();
})
document.getElementById('easein').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Ease.In;
    moveToRightTimer.start();
})
document.getElementById('easeout').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Ease.Out;
    moveToRightTimer.start();
})
document.getElementById('easeinout').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Ease.InOut;
    moveToRightTimer.start();
})
document.getElementById('elastic').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Elastic;
    moveToRightTimer.start();
})
document.getElementById('bounce').addEventListener('click', function () {
    moveToRightTimer.timeWarp = Sprite.AnimationTimer.Bounce;
    moveToRightTimer.start();
})

function loop (time) {
    ctx.clearRect(0, 0, c.width, c.height);
    requestAnimationFrame(loop);
    var tempFps = stats.update();
    fps = tempFps === 0 ? 60 : tempFps;
    ball.paint(ctx);
    ball.update(ctx);
}
moveToRightTimer.start();
requestAnimationFrame(loop);